<template>
	<view>
		<uni-file-picker
			:image-styles="imageStyles"
			:list-styles="listStyles"
      :limit="limit"
      fileMediatype="image"
      :title="title"
      v-model="fileLists"
      :sourceType="sourceType"
      @select="select"
      @progress="progress"
      @success="success"
      @fail="fail"
      @delete="deletea">
      <!--自定义 -->
      <slot />
    </uni-file-picker>
	</view>
	
</template>

<script>
	// import { fileURL,fileUpload }from "@/utils/base"
	import config from "../../../config";
	import { getToken } from '@/utils/auth'
	export default {
		name:"uploadImg",
		props: {
			limit:{
				type: Number,
				default: 9,
			},
			title:{
				type: String,
				default:''
			},
			value:{
				type: Array,
				default: () => []
			},
			imageStyles: {
				type: Object,
				default: () => {
					// return {
					// 	width:64,
					// 	height:64,
					// 	border:{
					// 		color:"#ff5a5f",
					// 		width:2,
					// 		style:'dashed',
					// 		radius:'2px'
					// 	}
					// };
				},
			},
			listStyles: {
				type: Object,
				default: () => {
					// return {
					// 	// 是否显示边框
					// 	border: true,
					// 	// 是否显示分隔线
					// 	dividline: true,
					// 	// 线条样式
					// 	borderStyle: {
					// 		width:1,
					// 		color:'blue',
					// 		radius:2
					// 	}
					// };
				},
			},
		},
		data() {
			return {
				// 图片回显
				fileLists: [],
				sourceType: ['album', 'camera'],
			};
		},
		watch:{
		    value: {
		      handler:function (val,oldVal) {
						let list = val.map(v =>{
							let item = {
								// url : fileURL+v,
								url : v.url,
								extname:'',
								name: v.fileName || '',
								ossId: v.ossId || '',
							}
							return item
						})
						this.fileLists = list
		      },
		      deep:true,
		      immediate: true
		    },
		},
		methods:{
			// 获取上传状态
			select(e) {
				const tempFilePaths = e.tempFilePaths;
				console.log(tempFilePaths);
				tempFilePaths.forEach(file =>{
					this.uploadFileFn(file)
				})
			},
			uploadFileFn(file){
				const fileUpload = config.baseUrl + '/xcx/common/upload';
				uni.uploadFile({
					url: fileUpload,
					filePath: file,
					name: 'file',
					header: {
						"token": getToken(),
					},
					// 成功函数
					success: (res) => {
						console.log('上传成功');
						let uploaddata = JSON.parse(res.data)
						let data = uploaddata.data
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						// x.url = fileURL+data.originalImageUr
						x.url = data.url
						x.extname = ''
						x.name = data.fileName
						x.ossId = data.ossId
						this.fileLists.push(x)
						this.emitDataFn(this.fileLists)
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			// 删除
			deletea(e) {
				let path = e.tempFilePath
				let fileLists = this.fileLists.filter(v => v.url!==path)
				this.fileLists = fileLists
				// console.log(fileLists);
				this.emitDataFn(fileLists)
			},
			emitDataFn(fileLists){
				this.$emit('change',fileLists)
				// let imgUrlArr = fileLists.map(v => {
				// 	// let imgPath = v.url.replace(fileURL, "")
				// 	let imgPath = v.url
				// 	return imgPath
				// })
				// // console.log(imgUrlArr);
				// this.$emit('change',imgUrlArr)
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			// 上传成功
			success(e){
				console.log('上传成功',e)
			},
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
		}
	}
</script>

<style lang="scss">

</style>